<template>
	<view class="content pb-safe p-20">		
		<u-navbar
			title="查看升级页面"
			:placeholder="true"
			:autoBack="true"
		>
		</u-navbar>
		
		<!-- 公告 -->
		<view class="flex-y-center bg-info-1 rd-16 p-10 px-20 shadow-s mb-20">
			<image class="w-60 h-60" src="@/static/images/zixungonggao@2x.png" mode=""></image>
			<view class="w-100v">
				<u-notice-bar icon="" text="公告内容公告内容公告内容公告内容" bgColor="#fff"></u-notice-bar>
			</view>
		</view>
		
		
		<view class="boxbg relative">
			<view class="fs-28 pl-40 pt-16">当前等级：一般等级</view>
			<image class="w-150 h-150 levelpng" src="@/static/images/v1.png" mode="widthFix"></image>
			<view class="pt-20 px-20" style="color: #FFDF43;">
				<view class="flex" style="align-items: flex-end;">
					<view>距离成为</view>
					<view class="fs-40 fw-600 pl-10 c-fff">金牌代理</view>
				</view>
				<view class="mt-10">还需完成：230个结算订单丨26个有效代理</view>
			</view>
			<view class="c-fff bg-fff-2 flex-around-center mx-20 py-30 mt-10 rd-8 text-center">
				<view class="u-border-right w-100v">
					<view class="fs-22">团队本月结算订单</view>
					<view class="fs-30">196</view>
				</view>
				<view class="u-border-right w-100v">
					<view class="fs-22">团队有效成员数量</view>
					<view class="fs-30">196</view>
				</view>
				<view class="w-100v">
					<view class="fs-22">考核未达标次数</view>
					<view class="fs-30">196</view>
				</view>
			</view>
		</view>
		
		
		<view class="rd-20 bg-fff p-20 my-20">			
			<view class="guizebg p-20 lh-36">
				<view class="h-80"></view>
				<view class="fs-30 py-10">金牌代理和精英代理</view>
				<view class="flex my-20">
					<image class="w-100 h-100 mr-10" src="@/static/images/image@2x.png" mode="widthFix"></image>
					<view>
						考核的订单为您的团队当月已结算的订单，不跨月累计；团队有效成员是历史累计数量（有效下级是指该下级拓展≥3个下级且完成订单≥6个）；
					</view>
				</view>
				<view class="flex my-20">
					<image class="w-100 h-100 mr-10" src="@/static/images/image@2x.png" mode="widthFix"></image>
					<view>
						考核的订单为您的团队当月已结算的订单，不跨月累计；团队有效成员是历史累计数量（有效下级是指该下级拓展≥3个下级且完成订单≥6个）；
					</view>
				</view>
				<view class="flex my-20">
					<image class="w-100 h-100 mr-10" src="@/static/images/image@2x.png" mode="widthFix"></image>
					<view>
						考核的订单为您的团队当月已结算的订单，不跨月累计；团队有效成员是历史累计数量（有效下级是指该下级拓展≥3个下级且完成订单≥6个）；
					</view>
				</view>
				<view class="flex my-20">
					<image class="w-100 h-100 mr-10" src="@/static/images/image@2x.png" mode="widthFix"></image>
					<view>
						考核的订单为您的团队当月已结算的订单，不跨月累计；团队有效成员是历史累计数量（有效下级是指该下级拓展≥3个下级且完成订单≥6个）；
					</view>
				</view>
			</view>
			
			<view class="fs-36 fw-600 my-20">您的等级越高  收入越高  加油哦</view>
		</view>
		
		<view class="h-100"></view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="less">
	.boxbg{
		background:url('@/static/images/Group-1000002177@2x.png') no-repeat;
		width: 100%;
		box-sizing: border-box;
		background-size: 100%;
		height:180px;
		position: relative;
		z-index: 3;
		margin-top: 20px;
	}
	.levelpng{
		position: absolute;
		right: 20rpx;
		top:20rpx;
	}
	
	.guizebg{
		background:url('@/static/images/Group 1000002176@2x.png') no-repeat;
		background-size: 100%;
	}
	
	
	.bubble {
	  position: relative; /* 为伪元素定位做准备 */
	  box-shadow: 0 0 8rpx 0 rgba(0,0,0,0.1); /* 阴影：水平偏移 垂直偏移 模糊 颜色 */
	}

	/* 指示角（伪元素） */
	.bubble::before {
	  content: ""; /* 伪元素必须有 content */
	  position: absolute;
	  top: -10px; /* 向上偏移，调整位置 */
	  // 10%,35%,60%,85%;
	  left:10%; /* 水平位置 */
	  width: 0;
	  height: 0;
	  border-left: 20rpx solid transparent; /* 左边透明 */
	  border-right: 20rpx solid transparent; /* 右边透明 */
	  border-bottom: 20rpx solid #fff; /* 底部颜色与气泡背景一致 */
	  filter: drop-shadow(0 0 8rpx 0 rgba(0,0,0,0.1));
	}
</style>
